<template>
  <el-dialog v-model="visible" :title="title">
    <el-form ref="formRef" :rules="rules" :model="form" label-width="11em">
      <el-form-item label="所属用户" prop="user">
        <el-select-v2
          v-model="form.user"
          placeholder="选择所属用户"
          :props="{ value: 'id', label: 'username' }"
          :options="userProfileStore.list"
        />
      </el-form-item>
      <el-form-item label="应用名称" prop="name">
        <el-input v-model="form.name" placeholder="输入应用名称" />
      </el-form-item>
      <el-form-item label="APPID" prop="appid">
        <el-input v-model="form.appid" placeholder="输入APPID" />
      </el-form-item>
      <el-form-item label="安全密钥" prop="secret_key">
        <el-input v-model="form.secret_key" placeholder="输入安全密钥" />
      </el-form-item>
      <el-form-item label="AES密钥" prop="aes_key">
        <el-input v-model="form.aes_key" placeholder="输入AES密钥" />
      </el-form-item>
      <el-form-item label="开发者服务器地址" prop="server_addr">
        <el-input v-model="form.server_addr" placeholder="输入开发者服务器地址" />
      </el-form-item>
      <el-form-item label="启用白名单" prop="enable_whitelist">
        <el-switch v-model="form.enable_whitelist" />
      </el-form-item>
      <el-form-item v-if="form.enable_whitelist" label="白名单" prop="whitelist" required>
        <el-input v-model="form.whitelist" type="textarea" :rows="5" resize="none" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="thirdAppStore.loading.create || thirdAppStore.loading.update"
          @click="handleConfirm"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineModel } from "vue";
import { useThirdAppStoreHook } from "@/store/modules/system/third-app";
import { ThirdAppType, ThirdAppFormType } from "@/api/system/third-app";
import { useUserProfileStoreHook } from "@/store/modules/user/profile";
import { cloneDeep } from "lodash-es";

const userProfileStore = useUserProfileStoreHook();

const thirdAppStore = useThirdAppStoreHook();

export type FormType = "add" | "edit";

export interface Props {
  type: FormType;
  form?: ThirdAppFormType;
}

const visible = defineModel({ type: Boolean, default: false });

const emits = defineEmits(["confirm"]);

const props = defineProps<Props>();

const formRef = ref();

const defaultForm: Partial<ThirdAppFormType> = {
  user: "",
  name: "",
  appid: "",
  secret_key: "",
  aes_key: "",
  server_addr: "",
  enable_whitelist: false,
  whitelist: "",
};

const form = reactive<Partial<ThirdAppFormType>>(cloneDeep(defaultForm));

const rules = {
  name: [
    {
      required: true,
      message: "请输入应用名称",
      trigger: "blur",
    },
  ],
  appid: [
    {
      required: true,
      message: "请输入APPID",
      trigger: "blur",
    },
  ],
  secret_key: [
    {
      required: true,
      message: "请输入安全密钥",
      trigger: "blur",
    },
  ],
  aes_key: [
    {
      required: true,
      message: "请输入AES密钥",
      trigger: "blur",
    },
  ],
  server_addr: [
    {
      required: true,
      message: "请输入开发者服务器地址",
      trigger: "change",
    },
    {
      pattern: /^https?:\/\/[^\s/$.?#].[^\s]*$/,
      message: "请输入有效的URL地址",
      trigger: "change",
    },
  ],
  whitelist: [
    {
      required: true,
      message: "请输入白名单",
      trigger: "blur",
    },
  ],
  user: [
    {
      required: true,
      message: "请选择所属用户",
      trigger: "change",
    },
  ],
};

const title = computed(() => {
  return props.type === "add" ? "新增" : "编辑";
});

watch(visible, (val) => {
  if (val) {
    userProfileStore.fetchUserProfileList({ page: 1, size: 9999 });
    if (props.type === "edit") {
      Object.assign(form, props.form);
    }
  } else {
    formRef.value.resetFields();
    Object.assign(form, cloneDeep(defaultForm));
  }
});

function handleConfirm() {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if (props.type === "add") {
        await thirdAppStore.fetchCreate(form);
      } else {
        await thirdAppStore.fetchUpdate(form);
      }
      visible.value = false;
      emits("confirm");
    }
  });
}
</script>

<style scoped lang="scss"></style>
